<template>
  <view class="version-update-container">
    <scroll-view scroll-y class="scroll-view">
      <view class="content-area">
        <!-- 版本历史卡片 -->
        <view class="version-card">
          <uv-steps
            :current="current"
            direction="column"
            inactiveColor="#FF6B35"
            activeColor="#FF6B35"
          >
            <uv-steps-item
              v-for="(version, index) in versionList"
              :key="index"
              :title="version.title"
            >
              <template #desc>
                <view class="version-desc">{{ version.desc }}</view>
              </template>
            </uv-steps-item>
          </uv-steps>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRequest } from '@/api'
  const { API_APPVERSION_LIST } = useRequest()
  
  // 版本列表数据
  const current = ref(0)
  const versionList = ref([])
  const getlist1 = async () => {
    const params = {

      page:1,
      page_size:999
    }
    const res = await API_APPVERSION_LIST(params)
    if (res.code === 1) {
      versionList.value = res.data.data || []
      current.value = res.data.total
    }
  }
  getlist1()
</script>

<style lang="scss" scoped>
  .version-update-container {
    height: 100vh;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
  }

  .scroll-view {
    flex: 1;
    background: #f8f9fa;
  }

  .content-area {
    padding: 32rpx;
  }

  // 版本历史卡片
  .version-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  }

  // 版本描述样式
  .version-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    text-align: justify;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    padding: 8rpx 0;
  }

  // 深度样式调整 uv-steps 组件
  :deep(.uv-steps) {
    .uv-steps-item {
      .uv-steps-item__title {
        font-size: 32rpx !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 16rpx !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
      }

      .uv-steps-item__dot {
        width: 48rpx !important;
        height: 48rpx !important;
        border-radius: 50% !important;
        background: #ff6b35 !important;
        border: 4rpx solid #fff !important;
        box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3) !important;
      }

      .uv-steps-item__line {
        background: #e9ecef !important;
        width: 2rpx !important;
      }
    }

    // 第一个步骤特殊样式（当前版本）
    .uv-steps-item:first-child {
      .uv-steps-item__dot {
        background: #ff6b35 !important;
        box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.4) !important;
      }
    }
  }
</style>
